<template>
	<div>
		<Header />
		<div>
			<div style="position: relative;">
				<img style="width: 100%;height: auto;" src="@/assets/images/industryNews16.jpg" >
				<div  style="position: absolute;bottom: 5px;left: 0;background-color: rgba(0, 0, 0, 0.2);width: 100%;">
					<div class="indexContainer mobileFontSize12" style="display: flex;align-items: center;font-size: 16px;color: #fff;padding: 10px 0;">
						<img style="width: 12px; height: 15px" src="@/assets/images/industryNews30.png"
							 />
						<span style="padding-left:5px;">当前位置：</span>
						<span>首页</span>
						<span style="padding: 0 5px;">></span>
						<span>方案推广</span>
						<span style="padding: 0 5px;">></span>
						<span>{{menuIndex==0?'行业方案':menuIndex==1?'机构方案':menuIndex==2?'专家文章':'方案征集'}}</span>
						<span style="padding: 0 5px;">></span>
						<span>{{menuIndex==0?'方案':menuIndex==1?'方案':menuIndex==2?'文章':'征集'}}详情</span>
					</div>
				</div>
			</div>

			<div class="indexContainer">
				<div
					style="display: flex;align-items: center;justify-content: center;padding: 30px 0;flex-direction: column;">
					<div style="width: 100%;padding: 20px 0;">
						<div style="padding: 30px;background-color: #f4f4f4;" class="mobilePadding">
							<div style="background-color: #fff;padding: 50px;" class="mobilePadding">
								<div style="text-align: center;">
									<h2 style="color: #333;font-size: 28px;" class="mobileFontSize14">{{info.schemeName}}</h2>
								</div>
								
								<div style="text-align: center;font-size: 16px;margin-top: 30px;">
									{{info.applicableTargets}}
								</div>
								
								<div style="text-align: center;font-size: 16px;margin-top: 30px;">
									<span style="color: #333;">发布人：{{info.authorfd}}</span>
									<span style="color: #333;margin-left: 15px;">发布时间：{{info.createTime}}</span>
									<template v-if="info.settleMatter&&info.settleMatter!=''">
										<span style="color: #333;margin-left: 15px;">来源：</span>
										<span style="color: #409eff;text-decoration: underline;cursor: pointer;">{{info.settleMatter}}</span>
									</template>
									
								</div>

								<div
									style="border-top: 1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 20px 0;margin:20px 0;display: flex;flex-direction: column;align-items: center;">
									<p v-html="info.expectedEffect"></p>
								</div>

								<div v-if="info.accessoryDtos&&info.accessoryDtos.length!=0" style="font-size: 20px;" class="mobileFontSize14">
									<div>附件：</div>
									<div v-for="(item,index) in info.accessoryDtos" style="text-decoration: underline;color: #409eff;cursor: pointer;" @click="handleFile(index)">
										{{item.accessoryName}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Footer />
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import {
		planPromotionListDetail,
		getKey
	} from "@/request/api/planPromotion";
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				info:{}
			}
		},
		created() {
			this.menuIndex = this.$route.query.menuIndex
			this.getDetail()
		},
		mounted() {
			//console.log('mounted')
		},
		methods: {
			getDetail() {
				planPromotionListDetail(this.$route.query.id).then((res) => {
					// console.log('res',res)
					if (res.data.code == 200) {
						this.info = res.data.result
						document.querySelector('meta[name="keywords"]').setAttribute('content', res.data.result.keywordes)
						document.querySelector('meta[name="description"]').setAttribute('content', res.data.result.executeSolution)
						document.title = res.data.result.schemeName
						
						getKey('applicable_industry').then(res => {
							if (res.data.code === 200) {
								let list = res.data.result.items
								list.map((item2)=>{
									if(this.info.applicableTargets && this.info.applicableTargets==item2.value){
										this.info.applicableTargets = item2.label
									}
								})
							}
						})
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 点击附件
			handleFile(index){
				let accessoryUrl = this.info.accessoryDtos[index].accessoryUrl
				window.open(accessoryUrl,'_blank')
			}
		}
	}
</script>
<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 10px !important;
		}
		.mobileFontSize14 {
			font-size: 14px !important;
		}
		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}

	/deep/.el-pagination.is-background .btn-prev {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .btn-next {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: linear-gradient(to bottom right, #266af2, #76a0f5);
	}
</style>